<template>
    <div :class="`${PREFIX}`">
        <p :class="`${PREFIX}-title`">选择99友婚需要注意什么</p>
        <Cardlist :list="list" />
        <Download :class="`${PREFIX}-download`"/>
    </div>
</template>
<script setup>
const PREFIX = 'page3'
import Cardlist from './components/Cardlist.vue'
import Download from '../components/Download.vue';
const list = [
    {
        img: new URL('../assets/img/qiandai.png', import.meta.url).href,
        title: '情感风险',
        con: '虽然友婚可以提供经济上的互助和支持，但也可能导致经济上的冲突。例如，如果一方有财务问题，可能会影响到另一方。因此，最好在友婚之前讨论并达成一致的财务安排'
    },
    {
        img: new URL('../assets/img/langman.png', import.meta.url).href,
        title: '情感支持',
        con: '友婚可能会对你的情感生活产生影响。例如，如果你在友婚后遇到了你的浪漫伴侣，可能会面临复杂的情感问题。因此，最好在友婚之前考虑清楚你的情感需求和期望。'
    }
]
</script>
<style lang="less">
.page3 {
    width: 1400px;
    height: 100%;
    margin: 0 auto;
    padding: 85px 91px 72px 110px;
    box-sizing: border-box;

    &-title {
        height: 50px;
        color: #666666;
        text-align: center;
        font-size: 42px;
        line-height: 50px;
        margin-bottom: 110px;
    }
    &-download {
        margin-top: 60px;
    }
}
</style>